<div class="tapTarget backward" (click)="onSeekBackward()"></div>
<div class="spacer"></div>
<div class="tapTarget forward" (click)="onSeekForward()"></div>

<style>
  :host {
    display: flex;
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    /* 
      Why 21? Simply because it's one index above the `ClickToPlay` component. Click the link
      below and scroll down to the `Z-Index` section to see existing levels.

      @see https://github.com/vime-js/vime/blob/src/globals/themes/default.css
    */
    z-index: 21;
    pointer-events: none;
  }

  :host > .spacer {
    flex: 1;
  }

  :host > .tapTarget {
    width: 7.5%;
    height: 100%;
    pointer-events: auto;
  }
</style>
